<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo后台管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">观元管理</a></li>
        <li class="active">站点菜单</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group grid-table-toolbar">
            <shiro:hasPermission name="permission:add">
            <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#permissionModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            </shiro:hasPermission>
        </div>
        <!--<table id="table"></table>-->
        <table id="menuTable" data-mobile-responsive="true" data-click-to-select="true">
            <thead>
            <tr>
                <th data-field="selectItem" data-checkbox="true"></th>
            </tr>
            </thead>
        </table>
    </div>
    <!-- 新增模态框 -->
    <div id="permissionModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新增菜单</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <form action="" method="post" class="form-horizontal" id="permissionForm">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">菜单名称 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="name" id="menuName" require="必填项"  placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">上级资源 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control cursor-pointer" id="parentMenu" value="袁天罡奇门遁甲" onclick="showMenu(1)" readonly="readonly">
                                    </div>
                                </div>
                                <div class="form-group menuFlag btnFlag">
                                    <label class="col-sm-3 control-label">菜单url :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control menuFlag btnFlag"  name="url" id="menuUrl" require="必填项" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group menuFlag btnFlag">
                                    <label class="col-sm-3 control-label">权限标识 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control menuFlag btnFlag"  name="perms" id="authValue" require="必填项" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group menuFlag catalogFlag">
                                    <label class="col-sm-3 control-label">排序 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control menuFlag catalogFlag"  name="orderNum" id="orderNum" require="必填项" max="3" plusinteger="" placeholder="">
                                    </div>
                                </div>
                                <input type="hidden" class="form-control" id="parentId" name="parentId" value="0">
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <div class="pull-right">
                                    <button type="button" id="saveMenu" onclick="insertMenu()" class="btn btn-info" >确定</button>
                                    <button type="button" data-dismiss="modal" id="insertcolose" class="btn btn-default">取消</button>
                                </div>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    
     <!-- 修改模态框 -->
    <div id="editMenuModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改菜单</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <form action="" method="post" class="form-horizontal" id="permissionForm">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">菜单名称 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="name" id="editmenuName" require="必填项"  placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">上级资源 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control cursor-pointer" id="editparentMenu" value="袁天罡奇门遁甲" onclick="showMenu(1)" readonly="readonly">
                                    </div>
                                </div>
                                <div class="form-group menuFlag btnFlag">
                                    <label class="col-sm-3 control-label">菜单url :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control menuFlag btnFlag"  name="url" id="editmenuUrl" require="必填项" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group menuFlag btnFlag">
                                    <label class="col-sm-3 control-label">权限标识 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control menuFlag btnFlag"  name="perms" id="editauthValue" require="必填项" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group menuFlag catalogFlag">
                                    <label class="col-sm-3 control-label">排序 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control menuFlag catalogFlag"  name="orderNum" id="editorderNum" require="必填项" max="3" plusinteger="" placeholder="">
                                    </div>
                                </div>
                                <input type="hidden" class="form-control" id="parentId" name="parentId" value="0">
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <div class="pull-right">
                                    <button type="button" id="editMenu" onclick="editMenuById()" class="btn btn-info" >确定</button>
                                    <button type="button" data-dismiss="modal" id="editcolose" class="btn btn-default">取消</button>
                                    <input type="hidden" id="editmenuId" value="">
                                </div>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>


 
     <!-- 修改模态框 -->
    <div id="deleteMenuModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                            <div class="box-footer">
                                <h4 class="modal-title"><font color="red">&nbsp;&nbsp;&nbsp;&nbsp;提示:</font>是否删除该菜单?</h4>
                                <div class="pull-right">
                                    <button type="button" id="deleteMenu" onclick="deleteMenuById()" class="btn btn-info" >删除</button>
                                    <button type="button" data-dismiss="modal" id="deletecolose" class="btn btn-default">取消</button>
                                    <input type="hidden" id="deletemenuId" value="">
                                </div>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>



    <!-- 资源详情modal -->
    <div id="permissionDetailModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">资源信息</h4>
                </div>
                <div class="modal-body">
                    <div id="permissionOpenWindow">
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <div id="menuLayer" style="display: none;padding-left: 20px;">
        <ul id="menuTrees" class="ztree"></ul>
    </div>
</section>
<script>
    var editFlag = "[[${@perms.hasPerm('permission:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('permission:delete')}]]";
    var menuType="1";/*默认选中菜单类型*/
    var menuCheckedType=0;/*选中的上级的菜单类型*/
    var detailMenuCheckedType;/*详情中选中的上级的菜单类型*/
    var Menu = {
        id: "menuTable",
        table: null,
        layerIndex: -1
    };

    /**
     * 初始化表格的列
     */
    Menu.initColumn = function () {
        var columns = [
            {
                field: 'selectItem',
                radio: true
            },
            {
                title: '菜单名称',
                field: 'menuName',
                align: 'left',
            },
            {title: '菜单URL',
                field: 'menuUrl',
                align: 'left',
            },
            {title: '权限标识',
                field: 'authValue',
                align: 'center',
            },
            {
                title: '排序',
                field: 'menuSort',
                align: 'center',
                width: '60px'
            },
            {
                field : 'operation',
                title : '操作',
                align : "center",
                formatter : function(row, index) {
                    var edit = editFlag=="true"  ?  '<a class="table-btn table-btn-info" href="javascript:void(0)" data-toggle="modal" data-target="#editMenuModal" onclick="editMenu('+row.menuId+')">编辑</a>' : '';
                    var del = deleteFlag=="true"  ?  '<a  class="table-btn table-btn-danger" href="javascript:void(0)" data-toggle="modal" data-target="#deleteMenuModal" onclick="deleteMenu('+row.menuId+')">删除</a>' : '';
                    return edit + del;
                }
            }]
        return columns;
    };
  
    /*加载权限列表*/
    $(function () {
        var colunms = Menu.initColumn();
        var table = new TreeTable(Menu.id, "/tgqmdj/list", colunms,"menuId");
        table.setExpandColumn(1);
        table.setIdField("menuId");
        table.setCodeField("menuId");
        table.setParentCodeField("pid");
        /*table.setExpandAll(true);*/
        table.setStriped(false);
        table.init();
        Menu.table = table;
    });

    $(function () {
        /*类型选择事件*/
        $('input:radio[name="type"]').on("click",function(){
            initPermissionForm();
            Core.clearError("#permissionForm");
            menuType = $('input:radio[name="type"]:checked').val();
            if(menuType=="0"){
                $(".btnFlag").hide();
                $(".menuFlag").hide();
                $(".catalogFlag").show();
            }
            if(menuType=="1"){
                $(".menuFlag").show();
            }
            if(menuType=="2"){
                $(".catalogFlag").hide();
                $(".menuFlag").hide();
                $(".btnFlag").show();
            }
        })

        /*新增权限保存事件*/
        $("#savePermission").on("click",function(){
            if((menuType=="0"||menuType=="1")&&menuCheckedType!=0){
                layer.msg("上级资源只能是目录类型！",function(){})
                return;
            }else if(menuType=="2"&&menuCheckedType!=1){
                layer.msg("上级资源只能是菜单类型！",function(){})
                return;
            }
            if(doValidForm(permissionForm)){
                if(menuType=="2"){
                    $("#orderNum").val(0);
                }
                Core.mask("#savePermission");
                Core.postAjax("/sys/permission/add",$("#permissionForm").serialize(),function (data) {
                    if(data.status==200){
                        Core.unmask("#saveMenu");
                        $("#permissionModal").modal("hide");
                        Menu.table.refresh();
                    }
                    layer.msg(data.msg);
                });

            }
        })
        /*新增权限modal框关闭后清空数据*/
        $("#permissionModal").on('hidden.bs.modal',function(){
            initPermissionForm();
            $("#type-menu").click();
            $("#parentMenu").val("顶层菜单");
            $("#parentId").val(0);
            $(".menuFlag").show();
            menuType="1";
            menuCheckedType=0;
        })
    })
    
    function  initPermissionForm() {
        $("#name").val("");
        $("#url").val("");
        $("#perms").val("");
        $("#orderNum").val("");
        $("#icon").val("");
        $("#description").val("");
    }


    function getMenuId () {
        var selected = $('#menuTable').bootstrapTreeTable('getSelections');
        if (selected.length == 0) {
            layer.msg("请选择一条记录");
            return false;
        } else {
            return selected[0].id;
        }
    }

    /*选择上级菜单树*/
    function showMenu(flag){
        var ztree;
        //树-初始化设置
        var treeSetting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "menuId",
                    pIdKey: "pid"
                }
            }
        };
        Core.postAjax('/tgqmdj/treelist',{flag:"1"},function (data) {
        	 
            ztree=$.fn.zTree.init($("#menuTrees"), treeSetting, data);
            layer.open({
                type: 1,
                offset: '50px',
                skin: 'layui-layer-molv',
                title: "选择菜单",
                area: ['300px', '450px'],
                /* shade: 0,
                 shadeClose: false,*/
                content: jQuery("#menuLayer"),
                btn: ['确定', '取消'],
                btn1: function (index) {
                    var node = ztree.getSelectedNodes();
                    if(node.length==0){
                        layer.msg("请选择一个菜单！",function(){});
                        return;
                    }
                    if(flag==1){
                        menuCheckedType = node[0].type;
                        //选择上级菜单
                        $("#parentId").val(node[0].id);
                        $("#parentMenu").val(node[0].name);
                    }else if(flag==2){
                        detailMenuCheckedType=node[0].type;
                        //选择上级菜单
                        $("#detailParentId").val(node[0].id);
                        $("#detailParentMenu").val(node[0].name);
                    }
                    layer.close(index);
                }
            });
        });
    }

//新增菜单
function insertMenu(){
	var menuName = $("#menuName").val();
	var parentMenu = $("#parentMenu").val();
	var menuUrl = $("#menuUrl").val();
	var authValue = $("#authValue").val();
	var orderNum = $("#orderNum").val();
	$.ajax({
		type:"post",
		url:"/tgqmdj/insertMenu",
		data:{"menuName":menuName,"pid":1,"menuUrl":menuUrl,"authValue":authValue,"menuSort":orderNum},
		dataType:"json",
		success:function(ret){
			if(ret.code==1){
				Core.unmask("#saveMenu");
                $("#permissionModal").modal("hide");
                Menu.table.refresh();
				$("#insertcolose").click();			
			}else{
			  alert(ret.msg);
			}
		},
		error:function(e){
			alert("e:"+e);
		}
	});    	
	
	/*新增权限modal框关闭后清空数据*/
    $("#permissionModal").on('hidden.bs.modal',function(){
        initPermissionForm();
        $("#parentMenu").val("顶层菜单");
        $("#parentId").val(0);
        $(".menuFlag").show();
        menuType="1";
        menuCheckedType=0;
    })
}
function  initPermissionForm() {
    $("#menuName").val("");
    $("#menuUrl").val("");
    $("#authValue").val("");
    $("#orderNum").val("");
}

//修改前显示
function editMenu(menuId){
	$.ajax({
		type:"post",
		url:"/tgqmdj/queryMenuById",
		data:{"menuId":menuId},
		dataType:"json",
		success:function(ret){
			var menuData = ret.data; 
			$("#editmenuName").val(menuData.menuName);
			//$("#editparentMenu").val(menuData);
			$("#editmenuUrl").val(menuData.menuUrl);
			$("#editauthValue").val(menuData.authValue);
			$("#editorderNum").val(menuData.menuSort);
			$("#editmenuId").val(menuId);
		},
		error:function(e){
			alert("e:"+e);
		}
	});    	
}
//修改
function editMenuById(){
	var editmenuName = $("#editmenuName").val();
	//var editparentMenu = $("#editparentMenu").val();
	var editmenuUrl = $("#editmenuUrl").val();
	var editauthValue = $("#editauthValue").val();
	var editorderNum = $("#editorderNum").val();
	var editmenuId = $("#editmenuId").val();
	$.ajax({
		type:"post",
		url:"/tgqmdj/updataMenuById",
		data:{"menuId":editmenuId,"menuName":editmenuName,"menuUrl":editmenuUrl,"authValue":editauthValue,"menuSort":editorderNum},
		dataType:"json",
		success:function(ret){
			if(ret.code==1){
				Core.unmask("#editMenu");
                $("#editMenuModal").modal("hide");
                Menu.table.refresh();
				$("#editcolose").click();			
			}else{
			  alert(ret.msg);
			}
		},
		error:function(e){
			alert("e:"+e);
		}
	});   
}

function deleteMenu(menuId){
	$("#deletemenuId").val(menuId)	
}

function deleteMenuById(){
	var menuId = $("#deletemenuId").val();
	$.ajax({
		type:"post",
		url:"/tgqmdj/deleteMenuById",
		data:{"menuId":menuId},
		dataType:"json",
		success:function(ret){
			if(ret.code==1){
				Core.unmask("#deleteMenu");
                $("#deleteMenuModal").modal("hide");
                Menu.table.refresh();
				$("#deletecolose").click();			
			}else{
			  alert(ret.msg);
			}
		},
		error:function(e){
			alert("e:"+e);
		}
	});   
}
</script>